<template>
	<el-form size="medium" ref="userForm" :model="userForm" class="custom_select_wrapper">
		<el-table :data="userForm.users" size="medium" class="index_table_wrapper">
			<el-table-column label="参与方式" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`users.${$index}.modeType`" :rules="userRules.modeType">
						<el-select v-model="row.modeType" placeholder="选择参与方式" @change="handleSelectChange">
							<el-option v-for="(item, index) in list" :key="index" :label="item.msg" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="姓名" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`users.${$index}.name`" :rules="userRules.name">
						<el-input v-model="row.name" placeholder="输入姓名"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="单位" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`users.${$index}.dept`" :rules="userRules.dept">
						<el-input v-model="row.dept" placeholder="输入单位"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="职称" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`users.${$index}.position`" :rules="userRules.position">
						<el-input v-model="row.position" placeholder="输入职称"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="角色" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`users.${$index}.role`" :rules="userRules.role">
						<el-input v-model="row.role" placeholder="输入角色"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column width="48">
				<template slot-scope="{ row, $index }">
					<el-button type="text" size="small" icon="sw-icon-delete" @click="handleDeleteUser($index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-button type="primary" size="small" class="add" @click="handleAddedUser()">新增一位</el-button>
	</el-form>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			userForm: {
				users: this.value
			},
			userRules: {
				modeType: [{ required: true, message: '请选择参与方式', trigger: 'change' }]
			}
		};
	},
	watch: {
		value(arr) {
			this.$set(this.userForm, 'users', arr);
		},
		'userForm.users'(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		handleAddedUser() {
			this.userForm.users.push({ name: '', dept: '', position: '', role: '', modeType: '' });
		},

		handleDeleteUser(index) {
			this.userForm.users.splice(index, 1);
		},

		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['userForm'].validate((valid) => {
					resolve(valid);
				});
			});
		},

		handleSelectChange(val) {
			if (val === '0') {
				this.$delete(this.userRules, 'name');
				this.$delete(this.userRules, 'dept');
				this.$delete(this.userRules, 'role');
				this.$delete(this.userRules, 'position');
			} else {
				this.$set(this.userRules, 'name', [{ required: true, message: '请输入姓名', trigger: 'blur' }]);
				this.$set(this.userRules, 'dept', [{ required: true, message: '请输入单位', trigger: 'blur' }]);
				this.$set(this.userRules, 'role', [{ required: true, message: '请输入角色', trigger: 'blur' }]);
				this.$set(this.userRules, 'position', [{ required: true, message: '请输入职称', trigger: 'blur' }]);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.custom_select_wrapper::v-deep {
	.el-button.add {
		margin-top: 10px;
	}
}
</style>
